<template>
  <div class="mobilenews module">
    <div class="container">
      <div
        class="container_header wow animate__animated animate__fadeInUp"
        style="visibility: visible"
      >
        <p class="title">{{ $t("home_project")}}</p>
        <p class="subtitle">Research projects</p>
      </div>

      <div
        class="
          container_category
          wow
          movedx
          animate__animated animate__fadeInUp
        "
        data-movedx-mid="2"
        data-movedx-distance="15"
        style="z-index: 999; visibility: visible"
      >
        <router-link :to="{ name: 'Research' }" class="active">
          <span>{{ $t("home_more") }}&nbsp;&gt;</span>
        </router-link>
      </div>
      <div class="content">
        <div class="">
          <ul class="content_list clearfix">
            <li
              class="item_block wow animate__animated animate__fadeInUp"
              style="visibility: visible"
              v-for="(item, index) in projects"
              :key="index"
            >
              <router-link
                class="item_box"
                :to="{ name: 'ResearchDetail', query: { id: item.id } }"
              >
                <div class="item_wrapper clearfix">
                  <div class="item_info clearfix">
                    <p class="title ellipsis">{{ item | filterTitle }}</p>
                    <p class="subtitle ellipsis"></p>
                  </div>

                  <div class="item_info">
                    <p class="description">
                      {{ item | filterDescription }}
                    </p>
                  </div>
                </div>
              </router-link>
              <router-link
                class="details"
                :to="{ name: 'ResearchDetail', query: { id: item.id } }"
              >
                {{ $t("detail")
                }}<i class="fa fa-angle-right" aria-hidden="true"></i>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
      <div class="clear"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeTeam',
  props: {
    projects: {
      type: Array
    }
  },
  mounted() {
  },
  // filters: {
  //   filterTitle(item) {
  //     return isEn() ? item.title_en : item.title
  //   },
  //   filterSubTitle(item) {
  //     return isEn() ? item.extra_en : item.extra
  //   },
  //   filterDescription(item) {
  //     return isEn() ? item.description_en : item.description
  //   }
  // },
}
</script>
<style scoped>
@import url("./mobileStyle.css");
</style>
